<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="../base.jsp" %>
<style>
	.content-wrapper{margin-left: 0px}
</style>
<script type="text/javascript">
$(function() {
	$.ajax({
		type:"POST",
		url: path+'cluster/getServicesList',
		success: function(result){
			result = result.result;
			var index = 0;
			for(var item in result){
				if(index ==0){
					showNodeInfo(item);
				}
				index = parseInt(index)+1;
				var appendStr = "<li onclick='showNodeInfo(\""+item+"\")' class='' id='"+index+"'><a href='#'><i class='fa fa-server'></i>"+item+"</a></li>";
				 $("#serviceList").append(appendStr);
			}
		}
	}); 
});

function showNodeInfo(serviceName){
	linkByDom('serverInfo','${url }cluster/info?servId=1&serviceName='+serviceName);
	$("#tab2").removeClass('active');
	$("#tab3").removeClass('active');
	$("#tab1").addClass('active');
	
	$("#h3Title").html("服务&nbsp;"+serviceName);
	$("#cellServiceName").val(serviceName);
	
	$.ajax({
		type:"POST",
		url: path+'cluster/getServicesList',
		success: function(result){
			$("#ipTbody").html("");
			$("#uUserNodeTbody").html("");
			result = result.result;
			var id1=1;
			var id0=1;
			for(var i = 0;i<result[serviceName].nodes.length;i++){
				for(var item in result[serviceName].nodes[i]){
					if(result[serviceName].nodes[i][item].state==1){
						var appendStr = "<tr><td>节点"+id1+"</td>";
						 appendStr+="<td><b>"+item+"</b></td>";
						 appendStr = showStatus(appendStr,serviceName,item,1);
						 //appendStr+="<td><button type='button' class='btn btn-default btn-sm' data-toggle='modal' data-target='#myModal'><i class='fa fa-plus'></i>程序输出</button></td>";
						 appendStr+="<td><a data-toggle='modal' data-target='#myModal2' title='日志文件' onclick='showLog(\""+item+"\",\""+serviceName+"\")'></i>日志文件</a>&nbsp;<a title='程序输出' onclick='programOutput(\""+item+"\",\""+serviceName+"\")' data-toggle='modal' data-target='#myModal'>程序输出</a></td></tr>";
						 $("#ipTbody").append(appendStr);
						 id1 = parseInt(id1)+1;
					}else{
						 var appendStr = "<tr><td>节点"+id0+"</td>";
						 appendStr+="<td><b>"+item+"</b></td>";
						 appendStr = showStatus(appendStr,serviceName,item,0);
						 appendStr+="<td><a href='#' title='添加' onclick='changeState(\""+serviceName+"\",\""+item+"\",1)'><i class='fa fa-plus text-blue'></i>添加</a></td></tr>";
						 $("#uUserNodeTbody").append(appendStr);
						 id0 = parseInt(id0)+1;
					}
				}
			}
		}
	}); 
}

function showLog(item,serviceName){
	$.ajax({
		type:"POST",
		url: path+'cluster/showLogList',
		data:{serviceName:serviceName,ip:item},
		success: function(result){
			$("#cotentBodyLog").html("");
			for(var i = 0;i<result.result[serviceName].logfiles.length;i++){
				var appendStr = "<a href='#' title='日志' onclick='programOutputAfter(\""+result.result[serviceName].logfiles[i]+"\",\""+serviceName+"\",\""+item+"\",1)'><i class='fa fa-plus text-blue'></i>"+result.result[serviceName].logfiles[i]+"</a><br />";
				$("#cotentBodyLog").append(appendStr);
			}
		}
	});
	
}


function programOutputAfter(fileName,serviceName,item){
	$('#myModal2').modal('hide');
	$('#myModal').modal('show');
	$("#logServiceName").val(serviceName);
	$("#logIp").val(item);
	$("#logFile").val(fileName);
	 $("#startline").val(-1);
	 $("#linenum").val(-20);
	 $("#totalnum").val(-1);
	$.ajax({
		type:"POST",
		url: path+'cluster/showProgramOutput',
		data:$("#logForm").serialize(),
		success: function(result){
			$("#cotentBody").html("");
			 if(result){
				 console.dir(result);
				 $("#cotentBody").html(result.result[serviceName].content);
				 $("#logFile").val(result.result[serviceName].file);
				 $("#startline").val(result.result[serviceName].startline);
				 $("#linenum").val(result.result[serviceName].linenum);
				 $("#totalnum").val(result.result[serviceName].totalnum);
			 }
		}
	}); 
}

function programOutput(item,serviceName){
	$("#logServiceName").val(serviceName);
	$("#logIp").val(item);
	$("#logFile").val("");
	 $("#startline").val(-1);
	 $("#linenum").val(-20);
	 $("#totalnum").val(-1);
	$.ajax({
		type:"POST",
		url: path+'cluster/showProgramOutput',
		data:$("#logForm").serialize(),
		success: function(result){
			$("#cotentBody").html("");
			 if(result){
				 console.dir(result);
				 $("#cotentBody").html(result.result[serviceName].content);
				 $("#logFile").val(result.result[serviceName].file);
				 $("#startline").val(result.result[serviceName].startline);
				 $("#linenum").val(result.result[serviceName].linenum);
				 $("#totalnum").val(result.result[serviceName].totalnum);
			 }
		}
	}); 
}

function goPage(status){
	var startIndex =0;
	var startline = $("#startline").val();
	var linenum = $("#linenum").val();
	var totalnum  = $("#totalnum").val();
	if(status==-1){
		if(startline==1){
			alert('已经是第一页');
			return;
		}else{
			if(parseInt(startline)-parseInt(linenum)>=1){
				startIndex = parseInt(startline)-parseInt(linenum);
				$("#startline").val(startIndex);
			}else{
				startIndex = 1;
			}
		}
	}else{
		if(startline==totalnum){
			alert('已经是最后一页');
			return;
		}else{
			if(parseInt(totalnum)-parseInt(startline)>=linenum){
				startIndex = parseInt(startline)+parseInt(linenum);
				$("#startline").val(startIndex);
			}else{
				//startIndex = totalnum;
				alert('已经是最后一页');
				return;
			}
		}
	}
	
	$.ajax({
		type:"POST",
		url: path+'cluster/showProgramOutput',
		data:$("#logForm").serialize(),
		success: function(result){
			$("#cotentBody").html("");
			 if(result){
				 for(var item in result.result){
					 $("#cotentBody").html(result.result[item].content);
					 $("#startline").val(startIndex);
				 }
			 }
		}
	}); 
}

function changeState(serviceName,ip,state){
	$.ajax({
		type:"POST",
		url: path+'cluster/updateState',
		data:{serviceName:serviceName,ip:ip,state:state},
		success: function(result){
			 if(result){
				 alert("操作成功");
				 showNodeInfo(serviceName);
			 }
		}
	}); 
}
function showStatus(appendStr,serviceName,ip,state){
	$.ajax({
		cache:false,
		async:false,
		type:"POST",
		url: path+'cluster/getNodeStatus',
		data:{serviceName:serviceName,ip:ip},
		success: function(result){
			if(result){
				var status = result.result[serviceName].status;
				if(status=="starting"){
					appendStr+="<td><img id='u75_img'  src='../dist/img/u37.png'></td>";
					if(state==1){
						appendStr+="<td><a href='#' title='重启' onclick='onclick='reStartNode(\""+serviceName+"\",\""+ip+"\")'><i class='fa fa-refresh text-green'></i>重启</a>";
						appendStr+="<a href='#' title='停止' onclick='stopNode(\""+serviceName+"\",\""+ip+"\")'><i class='fa fa-stop text-yellow'></i>停止</a></td>";	
					}
				}else if(status=="running"){
					appendStr+="<td><img id='u75_img'  src='../dist/img/u37.png'></td>";
					if(state==1){
						appendStr+="<td><a href='#' title='重启' onclick='reStartNode(\""+serviceName+"\",\""+ip+"\")'><i class='fa fa-refresh text-green'></i>重启</a>";
						appendStr+="<a href='#' title='停止' onclick='stopNode(\""+serviceName+"\",\""+ip+"\")'><i class='fa fa-stop text-yellow'></i>停止</a></td>";	
					}
				}else if(status=="stopping"){
					appendStr+="<td><img id='u75_img'  src='../dist/img/u131.png'></td>";
					if(state==1){
						appendStr+="<td><a href='#' title='启动' onclick='startNode(\""+serviceName+"\",\""+ip+"\")'><i class='fa fa-play text-blue'></i>启动</a>";
						appendStr+="<a href='#' title='删除' onclick='changeState(\""+serviceName+"\",\""+ip+"\",0)'><i class='fa fa-close text-red'></i>删除</a></td>";	
					}
				}else{
					appendStr+="<td><img id='u75_img'  src='../dist/img/u131.png'></td>";
					if(state==1){
						appendStr+="<td><a href='#' title='启动' onclick='startNode(\""+serviceName+"\",\""+ip+"\")'><i class='fa fa-play text-blue'></i>启动</a>";
						appendStr+="<a href='#' title='删除' onclick='changeState(\""+serviceName+"\",\""+ip+"\",0)'><i class='fa fa-close text-red'></i>删除</a></td>";	
					}
				}
			}
		}
	});
	return appendStr;
}

function showNodeStatus(serviceName,ip){
	var status ="";
	$.ajax({
		cache:false,
		async:false,
		type:"POST",
		url: path+'cluster/getNodeStatus',
		data:{serviceName:serviceName,ip:ip},
		success: function(result){
			if(result){
				status = result.result[serviceName].status;
			}
		}
	});
	return status;
}

function startNode(serviceName,ip){
	$.ajax({
		cache:false,
		async:true,
		type:"POST",
		url: path+'cluster/startNodeByIpAndServiceName',
		data:{serviceName:serviceName,ip:ip},
		beforeSend:function(xhr){
			showLoading();
		},
		success: function(result){
			if(result){
				alert("启动成功");
				showNodeInfo(serviceName);
			}
		},
		complete:function(xhr){
			hideLoading();
		}
	});
}

function stopNode(serviceName,ip){
	$.ajax({
		cache:false,
		async:true,
		type:"POST",
		url: path+'cluster/stopNodeByIpAndServiceName',
		data:{serviceName:serviceName,ip:ip},
		beforeSend:function(xhr){
			showLoading();
		},
		success: function(result){
			if(result){
				alert("停止成功");
				showNodeInfo(serviceName);
			}
		},
		complete:function(xhr){
			hideLoading();
		}
	});
}

function reStartNode(serviceName,ip){
	$.ajax({
		cache:false,
		async:true,
		type:"POST",
		url: path+'cluster/stopNodeByIpAndServiceName',
		data:{serviceName:serviceName,ip:ip},
		beforeSend:function(xhr){
			showLoading();
		},
		success: function(result){
			if(result){
				$.ajax({
					cache:false,
					async:true,
					type:"POST",
					url: path+'cluster/startNodeByIpAndServiceName',
					data:{serviceName:serviceName,ip:ip},
					success: function(result){
						if(result){
							alert("重新启动成功");
							showNodeInfo(serviceName);
						}
					},
					complete:function(){
						hideLoading();
					}
				});
			}
		}
	});
}

function getIsExistIp(serviceName){
	var ip="";
	$.ajax({
		cache:false,
		async:false,
		type:"POST",
		url: path+'cluster/getIpsByName',
		data:{serviceName:serviceName,state:1},
		success: function(result){
			 if(result){
				 if(result.length>0){
					 ip =  result[0].ip;
				 }else{
					 $.ajax({
						 	cache:false,
							async:false,
							type:"POST",
							url: path+'cluster/getIpsByName',
							data:{serviceName:serviceName,state:0},
							success: function(result1){
								 if(result1){
									 if(result1.length>0){
										 ip = result1[0].ip;
									 }
								}
							}
					});
				 }
			 }
		}
	}); 
	return ip;
}

function startAll(){
	var special = false;
	if($("#cellServiceName").val()=='spark' || $("#cellServiceName").val()=='hadoop' || $("#cellServiceName").val()=='hbase'){
		special = true;
	}
	if(confirm('确实要全部启动吗?')){
		showLoading();
		$.ajax({
			cache:false,
			async:true,
			type:"POST",
			url: path+'cluster/getServicesList',
			success: function(result){
				result = result.result;
				var serviceLength = result[$("#cellServiceName").val()].nodes.length;
				if(special){
					serviceLength = 1;
				}
				for(var i = 0;i<serviceLength;i++){
					for(var item in result[$("#cellServiceName").val()].nodes[i]){
						if(result[$("#cellServiceName").val()].nodes[i][item].state==1){
							if(showNodeStatus($("#cellServiceName").val(),item)!="running"){
								if(showNodeStatus($("#cellServiceName").val(),item)=="stopped"){
									$.ajax({
										cache:false,
										async:false,
										type:"POST",
										url: path+'cluster/startNodeByIpAndServiceName',
										data:{serviceName:$("#cellServiceName").val(),ip:item},
										success: function(result){
											if(result){
											}
										}
									});
								}else{
									$.ajax({
										cache:false,
										async:false,
										type:"POST",
										url: path+'cluster/stopNodeByIpAndServiceName',
										data:{serviceName:$("#cellServiceName").val(),ip:item},
										success: function(result){
											if(result){
												$.ajax({
													cache:false,
													async:false,
													type:"POST",
													url: path+'cluster/startNodeByIpAndServiceName',
													data:{serviceName:$("#cellServiceName").val(),ip:item},
													success: function(result){
														if(result){
															
														}
													}
												});
											}
										}
									});
								}
							}
						}
					}
				}
				hideLoading();
				alert("全部启动成功");
				showNodeInfo($("#cellServiceName").val());
			}
		});
	}
}

function stopAll(){
	var special = false;
	if($("#cellServiceName").val()=='spark' || $("#cellServiceName").val()=='hadoop' || $("#cellServiceName").val()=='hbase'){
		special = true;
	}
	if(confirm('确实要全部停止吗?')){
		$.ajax({
			cache:false,
			async:true,
			type:"POST",
			url: path+'cluster/getServicesList',
			success: function(result){
				result = result.result;
				var serviceLength = result[$("#cellServiceName").val()].nodes.length;
				if(special){
					serviceLength = 1;
				}
				for(var i = 0;i<serviceLength;i++){
					for(var item in result[$("#cellServiceName").val()].nodes[i]){
						if(result[$("#cellServiceName").val()].nodes[i][item].state==1){
							if(showNodeStatus($("#cellServiceName").val(),item)!="stopped"){
								$.ajax({
									cache:false,
									async:true,
									type:"POST",
									url: path+'cluster/stopNodeByIpAndServiceName',
									data:{serviceName:$("#cellServiceName").val(),ip:item},
									success: function(result){
										if(result){						
										}
									}
								});
							}
						}
					}
				}
				hideLoading();
				alert("全部停止成功");
				showNodeInfo($("#cellServiceName").val());
			},
			beforeSend:function(){
				showLoading();
			}
		});
	}
}

function reStartAll(){
	var special = false;
	if($("#cellServiceName").val()=='spark' || $("#cellServiceName").val()=='hadoop' || $("#cellServiceName").val()=='hbase'){
		special = true;
	}
	if(confirm('确实要全部重新启动吗?')){
		showLoading();
		$.ajax({
			cache:false,
			async:true,
			type:"POST",
			url: path+'cluster/getServicesList',
			success: function(result){
				result = result.result;
				var serviceLength = result[$("#cellServiceName").val()].nodes.length;
				if(special){
					serviceLength = 1;
				}
				for(var i = 0;i<serviceLength;i++){
					for(var item in result[$("#cellServiceName").val()].nodes[i]){
						if(result[$("#cellServiceName").val()].nodes[i][item].state==1){
								if(showNodeStatus($("#cellServiceName").val(),item)=="stopped"){
									$.ajax({
										cache:false,
										async:true,
										type:"POST",
										url: path+'cluster/startNodeByIpAndServiceName',
										data:{serviceName:$("#cellServiceName").val(),ip:item},
										success: function(result){
											if(result){
											}
										}
									});
								}else{
									$.ajax({
										cache:false,
										async:false,
										type:"POST",
										url: path+'cluster/stopNodeByIpAndServiceName',
										data:{serviceName:$("#cellServiceName").val(),ip:item},
										success: function(result){
											if(result){
												$.ajax({
													cache:false,
													async:false,
													type:"POST",
													url: path+'cluster/startNodeByIpAndServiceName',
													data:{serviceName:$("#cellServiceName").val(),ip:item},
													success: function(result){
														if(result){
															
														}
													}
												});
											}
										}
									});
								}
							}
					}
				}
				hideLoading();
				alert("全部重新启动成功");
				showNodeInfo($("#cellServiceName").val());
			}
		});
	}
}
</script>
<body class="hold-transition skin-blue sidebar-mini">
	<div class="wrapper">
		<!-- Content Wrapper. Contains page content -->
		<div class="content-wrapper">
			<!-- Content Header (Page header) -->
			<section class="content-header">
				<h1>服务配置<small>集群管理</small></h1>
				<ol class="breadcrumb">
					<li><a href="javascript:;"><i class="fa fa-dashboard"></i> 首页</a></li>
					<li>服务</li>
					<li class="active">集群管理</li>
				</ol>
			</section>
			<!-- Main content -->
			<section class="content">
				<div class="row">
        			<div class="col-md-3">
        				<div class="box box-solid">
				          <div class="box-header with-border">
				            <h3 class="box-title">概览</h3>
				            <div class="box-tools">
				              <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
				              </button>
				            </div>
				          </div>
				          <div class="box-body no-padding">
				            <ul id="serviceList" class="nav nav-pills nav-stacked">
				            </ul>
				          </div>
				          <!-- /.box-body -->
				        </div>
        			</div>
        			<div class="col-md-9">
        				<div class="nav-tabs-custom">
				            <ul class="nav nav-tabs">
				              <li id="tab1" class="active"><a href="javascript:;" data-toggle="tab">集群配置</a>
				              </li>
				              <li id="tab2"><a href="javascript:;" data-toggle="tab">参数配置</a><input type="hidden" id="cellServiceName" /></li>
				              <li id="tab3"><a href="javascript:;" data-toggle="tab">模板</a></li>
				            </ul>
				            <div class="tab-content" id="serverInfo">
		        				<jsp:include page="server_info.jsp"></jsp:include>
				            </div>
				        </div>
        			</div>
        		</div>
        		<button type="button" style="display: none;position: fixed;top:50%;left: 50%"
					class="btn btn-warning btn-lg ladda-button center-block"
					id="showmore" data-style="contract-overlay">
					<span class="ladda-label"> &nbsp; </span>
				</button>
			</section>
		</div>
	</div>
	
	<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" 
   aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel">
               日志输出
            </h4>
         </div>
         <div class="modal-body" id="cotentBodyLog">
             
         </div>
         <div class="modal-footer">
            <!-- <ul class="pagination" id="paginationLog">
            	<li><a href='#' onclick='goPage(-1)'>上一页</a></li>
            	<li><a href='#' onclick='goPage(0)'>下一页</a></li>
			</ul> -->
            <button type="button" class="btn btn-default" 
               data-dismiss="modal">关闭
            </button>
         </div>
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
   aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel">
               程序输出
            </h4>
         </div>
         <div class="modal-body" id="cotentBody">
             
         </div>
         <div class="modal-footer">
            <ul class="pagination" id="pagination">
            	<li><a href='#' onclick='goPage(-1)'>上一页</a></li>
            	<li><a href='#' onclick='goPage(0)'>下一页</a></li>
			</ul>
            <button type="button" class="btn btn-default" 
               data-dismiss="modal">关闭
            </button>
         </div>
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
	<form id="logForm">
		<input type="hidden" name="serviceName" id="logServiceName" />
		<input type="hidden" name="ip" id="logIp" />
		<input type="hidden" name="type" value="stdout" />
		<input type="hidden" name="file" id="logFile" />
		<input type="hidden" name="startline" id="startline"  value="-1"/>
		<input type="hidden" name="linenum" id="linenum" value="-20" />
		<input type="hidden" name="totalnum" id="totalnum"  value="-1"/>
	</form>
	<script type="text/javascript">
	
	function showLoading() {
		$("#showmore").css('display', 'block');
		var $wallcontent = $('#wallcontent'), pagenum = 1, $showmore = $('#showmore');
		function loadshots() {
			var l = Ladda.create(this);
			l.start();
		}
		$showmore.bind('click', loadshots);
		$showmore.trigger('click');
	}
	
	function hideLoading() {
		$("#showmore").css('display', 'none');
		var $wallcontent = $('#wallcontent'), pagenum = 1, $showmore = $('#showmore');
		function loadshots() {
			var l = Ladda.create(this);
			l.stop();
		}
		$showmore.bind('click', loadshots);
		$showmore.trigger('click');
	}
	
	function nav(){
		$('.nav-stacked li').on('click',function(){
			$('.nav-stacked li').removeClass('active');
			$(this).addClass('active');
		});
	}
	$(function () {
		$('.nav-tabs li').on('click',function(){
			var id = $('#servId').val();
			$('.nav-tabs li').removeClass('active');
			$(this).addClass('active');
			var index = $(this).index();
			if(index == 0){
				linkByDom('serverInfo','${url }cluster/info?servId='+id+'&serviceName='+$("#cellServiceName").val());
				showNodeInfo($("#cellServiceName").val());
			}else if(index == 1){
				linkByDom('serverInfo','${url }cluster/parameter?servId='+id+'&serviceName='+$("#cellServiceName").val()+'&ip='+getIsExistIp($("#cellServiceName").val()));
			}else{
				linkByDom('serverInfo','${url }cluster/template?servId='+id+'&serviceName='+$("#cellServiceName").val()+'&ip='+getIsExistIp($("#cellServiceName").val()));
			}
		});
	});
	
	</script>
</body>